<!--
 * @Author: wangming
 * @Date: 2021-04-23 17:31:47
 * @LastEditors: wangming
 * @LastEditTime: 2021-10-12 17:00:32
 * @Description: 我的待办
-->
<template>
  <div class="p20">
    <el-row :gutter="12">
      <el-col :span="6">
        <el-select
          v-model="queryData.processId"
          :placeholder="$t('sys.all_processes')"
          style="width: 100%"
          @change="loadData"
        >
          <el-option :label="$t('sys.all_processes')" value=""></el-option>
          <el-option
            :label="`${i.name}(V${i.version})`"
            :value="i.id"
            v-for="(i, index) in options"
            :key="index"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-input
          @change="loadData"
          v-model="queryData.searchKey"
          :placeholder="$t('sys.all_processes_search_key')"
          size="small"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%" class="mt20">
      <el-table-column prop="processName" :label="$t('sys.process_type')">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="todoForm(scope.row)"
            :title="scope.row.processName"
            class="limit"
            >{{ scope.row.processName }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="processTitle"
        :label="$t('sys.process_title')"
        width="260"
      >
      </el-table-column>
      <el-table-column
        prop="taskId"
        :label="$t('sys.instance_ID')"
        width="260"
      ></el-table-column>
      <el-table-column prop="submitterName" :label="$t('sys.submitter')">
      </el-table-column>
      <el-table-column prop="taskName" :label="$t('sys.current_node')">
      </el-table-column>
      <el-table-column
        prop="submitterOrgName"
        :label="$t('sys.submission_department')"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        :label="$t('sys.application_time')"
        width="120"
      >
        <template slot-scope="scope">
          {{ new Date(scope.row.createTime).format("yyyy-MM-dd hh:mm") }}
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="queryData.pageSize"
        :pageNo.sync="queryData.pageNo"
        @search="loadData"
      />
    </div>
  </div>
</template>

<script>
import {
  getHmprocessruntimeTaskTodo,
  getHmprocessruntimeProcessOngoing,
  getHmprocessruntimeTaskformkey,
  getHmprocessruntimeTaskTodoCount,
} from "@/apis/paas/HmProcessRuntimeController.js";
export default {
  data() {
    return {
      total: 0,
      queryData: { pageNo: 1, pageSize: 10, processId: "", searchKey: "" },
      options: [],
      tableData: [],
    };
  },
  async mounted() {
    this.loadData();
    this.options = await getHmprocessruntimeProcessOngoing();
    //进页面获取最新代办数
    const msgData = await getHmprocessruntimeTaskTodoCount();
    this.$store.commit("SET_PROCESS_NUM", msgData);
  },
  methods: {
    async todoForm({ taskId }) {
      let {
        dataId,
        todo: pageKey,
        todoParams,
      } = await getHmprocessruntimeTaskformkey({
        taskId,
      });
      const todoObj = todoParams ? JSON.parse(todoParams) : {};
      this.$router.push({
        name: "app-audit-audit",
        query: { taskId, pageKey, id: dataId, ...todoObj },
      });
    },
    async loadData() {
      const { totalCount, data } = await getHmprocessruntimeTaskTodo(
        this.queryData
      );
      this.tableData = data;
      this.total = totalCount;
    },
  },
};
</script>

<style lang="scss" scoped>
.limit {
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
</style>
